$(function() {
	//存储定时器的返回值,用于开关定时器
	var timer = null;

	//记录当前图片的位置(或圆点的位置)
	var i = 0;

	//将第一个li克隆一份
	$(".piclist li").eq(0).clone().appendTo('.piclist');

	//计算克隆后ul的长度
	var ulWidth = $(".piclist li").length * $(".piclist li").eq(0).width() + 'px';

	//设置ul的长度
	$('.piclist').css('width', ulWidth);

	//开启定时器 
	//自动运动
	timer = setInterval(autoMove, 1000);

	//鼠标放在盒子上面关闭定时器
	$("#box").hover(function() {
		clearInterval(timer);
	}, function() {
		timer = setInterval(autoMove, 1000);
	})

	//鼠标放在小圆点上面的运动
	$(".dotlist li").hover(function() {

		clearInterval(timer);

		//获取当前圆点的索引值
		i = $(this).index();

		startMove();
	})

	//鼠标点击右键的运动
	$('.right').click(function() {
		i++;
		if (i == $(".piclist li").length) {

			//一旦出界让他跳到第二张图片
			i = 1;

			//归零相当后来的运动就是重新开始的
			$(".piclist").css('left', 0);
		}
		startMove();
	});

	//鼠标点击左键的运动

	$(".left").click(function() {
		i--;
		if (i == -1) {

			//一旦出界就让他跳到倒数第二张图片
			i = $(".piclist li").length - 2;
			
			//移动到倒数第二张图片上面
			var startLeft = -($(".piclist li").length - 1) * 800 + 'px';
			$(".piclist").css('left', startLeft);
		}
		startMove();
	});

	/**
	 * 定时器函数的主体
	 */
	function autoMove() {
		i++;
		if (i == $(".piclist li").length) {
			//说明到了最后一张了,这时候让他瞬间变成第一张那么接下来的运动才是对的
			$(".piclist").css("left", 0);
			i = 1;
		}

		startMove();

	}

	/**
	 * 运动函数
	 */
	function startMove() {

		//每次向左滑动的距离
		var leftMove = -i * 800 + 'px';

		$(".piclist").stop().animate({
			'left': leftMove
		}, 500);

		if (i == $(".piclist li").length - 1) {

			//因为最后一张和第一张是一样的,所以在最后一张上面,小圆点就要在第一的位置显示
			$(".dotlist li").eq(0).addClass('active').siblings().removeClass('active');

		} else {

			$(".dotlist li").eq(i).addClass('active').siblings().removeClass('active');
		}

	}

})